<template>
  <div class="y-comment-item">
    <div class="left-col">
      <el-avatar :src="value.sender.avatar"></el-avatar>
    </div>
    <div class="right-col">
      <div class="user-comment">
        <div class="user-comment-header user-comment-item">
          <div>{{ value.sender.name }}</div>
          <div v-text="value.comment.level===2?'回复:':''"></div>
          <div style="float: right" v-text="computedCreateTime"></div>
        </div>

        <!--        展示评论内容-->
        <div class="user-comment-body user-comment-item" v-html="computedCommentContent">

        </div>
        <div v-if="value.comment.image" class="user-comment-img-box user-comment-item">
          <YImage :pre-src-list="[value.comment.image]" :src="value.comment.image" style="height: 100%"></YImage>
        </div>

        <!--        下方功能区-->
        <div class="user-comment-bottom user-comment-item">
          <el-link :style="{color:like?'red':''}" :underline="false" @click="handleClickLike">
            <svg class="icon" height="128" p-id="2638" t="1682061405065" version="1.1"
                 viewBox="0 0 1024 1024" width="128" xmlns="http://www.w3.org/2000/svg">
              <path
                  d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                  p-id="2639"></path>
            </svg>
            <span v-text="computedLikeNum"></span></el-link>
          <el-link
              v-if="value.user.id!==value.sender.id"
              :type="showInput?'danger':''"
              :underline="false"
              @click="showInput=!showInput">
            <i class="el-icon-chat-dot-square"></i>
            <span v-text="showInput?'取消回复':'回复'">

            </span>
          </el-link>

          <el-popover
              v-model="showDeleteNoticeBox"
              placement="top"
              width="160">
            <p>确定删除该评论吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="danger" @click="handleDelete">确定</el-button>
              <el-button size="mini" type="text" @click="showDeleteNoticeBox = false">取消</el-button>

            </div>
            <el-link v-if="value.sender.id===value.user.id" slot="reference" style="float: right;" type="danger">删除
            </el-link>
          </el-popover>


          <div v-text="formatDate(value.comment.createTime)"></div>
        </div>
      </div>

      <CommentEditor v-show="showInput" :receiver="value.sender" @cancel="handleCancel"
                     @send="handleSend"></CommentEditor>
    </div>

  </div>
</template>

<script>
import YImage from "@/components/image/YImage.vue";
import CommentEditor from "@/components/Comment/CommentEditor.vue";
import {formatDate} from "@/util/DateUtil";

export default {
  name: "CommentItem",
  props: {
    item: {
      type: Object,
      default: {
        comment: {},
        sender: {},
        receiver: {},
      }
    }
  },
  components: {CommentEditor, YImage},
  data() {
    return {
      showInput: false,
      like: false,
      value: this.$props.item,
      showDeleteNoticeBox: false,
    }
  },
  computed: {
    computedLikeNum() {


      if (!this.value.comment.likeNum) {
        this.$set(this.value.comment, 'likeNum', 0)
      }

      let num = this.value.comment.likeNum
      if (num < 1000) {
        return num
      } else if (num < 1000000) {
        return Math.round(num / 1000) + ' k'
      } else {
        return Math.round(num / 10000) + ' w'
      }
    },

    // 根据评论的层级level，计算不同的展示风格
    computedCommentContent() {
      if (this.value.comment.level === 3) {
        return `回复<span style="color: tomato">@:${this.value.receiver.name}:</span> ${this.value.comment.content}`
      } else {
        return this.value.comment.content
      }
    },
    // 计算评论发生时间是xxx之前,1分钟/1小时之前
    computedCreateTime() {
      let now = new Date();
      let create = this.value.comment.createTime
      let sub = (now.getTime() - create.getTime()) / 1000

      // 1h以内
      if (sub / 3600 < 1) {
        return Math.ceil(sub / 60) + ' 分钟前'
      } else if (sub / 3600 / 24 < 1) {
        // 今天之内
        return Math.ceil(sub / 3600) + ' 小时前'
      } else if (sub / 3600 / 24 / 30 < 1) {
        return Math.ceil(sub / 3600 / 24) + ' 天前'
      } else {
        return Math.ceil(sub / 3600 / 24 / 30) + ' 月前'
      }

    }
  },
  methods: {
    formatDate,
    handleSend(content) {
      this.$emit("send", {
        comment: this.value.comment,
        receiver: this.value.sender,
        value: content
      })
      this.showInput = false
    },
    handleCancel() {
      this.showInput = false
    },
    handleDelete() {
      this.showDeleteNoticeBox = false
      this.$emit("delete", this.value)
    },
    // 点击【喜欢】
    handleClickLike() {
      this.like = !this.like
      this.$emit("like", {
        like: this.like,
        comment: this.value.comment
      })
    }
  },
  mounted() {

  },
  watch: {
    item(newV) {
      this.value = newV
    }
  }
}
</script>

<style lang="less" scoped>
.y-comment-item {
  width: 100%;
  min-width: 300px;
  display: flex;
  flex-direction: row;
  font-size: 14px;

  .left-col {
    flex: 1;
  }

  .right-col {
    flex: 9;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .user-comment {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-size: 14px;
      min-height: 20px;

      .user-comment-item {
        padding: 5px;
        font-size: 13px;
      }

      .user-comment-header {
        display: flex;
        justify-content: flex-start;

        div {
          margin-right: 5px;
        }

        div:nth-child(2) {
          color: #8c939d;
        }
      }

      .user-comment-body {
        text-align: left;

      }

      .user-comment-img-box {
        height: 150px;
        overflow: hidden;
      }

      .user-comment-bottom {
        width: 100%;
        height: 30px;
        font-size: 13px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;

        div {

          margin: 0 5px;
          caret-color: transparent;
          color: grey;

        }

        .el-link {
          float: left;
          margin: 0 5px;
          caret-color: transparent;
        }
      }
    }

    .comment-reply {
      background-color: #F7F7F7;
    }
  }

}
</style>